/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
*/

@import '../../../styles/variables.scss';
@import '../../../styles/mixins.scss';
$pipeline-type-icon-size: 20px;
$top-panel-height: 55px;
$btn-border-color: transparent;
$toppanel-border-bottom-color: $grey-05;

.pipeline-details-top-panel {
  height: $top-panel-height;
  background-color: white;
  color: $grey-02;
  border-bottom: 1px solid $toppanel-border-bottom-color;
  z-index: 999;
  width: 100%;
  display: grid;
  grid-template-columns: 40% 40% 20%;

  .pipeline-metadata {
    padding-top: 5px;
    margin-left: 10px;

    .pipeline-type-name-version {
      display: flex;
      align-items: center;
      height: 22px;

      .pipeline-type {
        margin-right: 5px;

        .icon-svg {
          color: $blue-02;
          height: $pipeline-type-icon-size;
          width: $pipeline-type-icon-size;
        }
      }

      .pipeline-name {
        font-size: 16px;
        line-height: 22px;
        display: inline;
        font-weight: 500;
        margin: 0 3px 0 0;
        color: $grey-01;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        /* to leave some space for the pipeline type icon and pipeline version */
        max-width: calc(100% - 180px);
      }

      .pipeline-description {
        margin-right: 5px;

        #pipeline-description-info-icon {
          color: $blue-02;
        }
      }

      .pipeline-version {
        align-self: flex-end;
        display: none; /* hiding this until we implement pipeline versioning */
      }
    }
  }

  .pipeline-details-buttons {
    height: $top-panel-height;
    display: flex;
    align-items: center;

    .pipeline-action-container {
      display: inline-block;
      position: relative;
      height: 100%;
      border-left: 1px solid $btn-border-color;
      border-bottom: 1px solid $btn-border-color;

      &.active,
      &:hover {
        background-color: $grey-08;
        color: $grey-01;
        border: 1px solid $grey-05;
        border-top: 0;

        .pipeline-action-btn {
          &:not(.pipeline-stop-btn):not(.pipeline-run-btn) {
            border-right: 0;
          }
        }

        &:after {
          display: none;
        }
      }

      &.active {
        border-bottom-color: $btn-border-color;
      }

      .pipeline-action-btn {
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 0;

        .icon-svg {
          // This is to maintain the same height for all svg icons.
          // This is required because we have a mix of font icons converted to svg
          // from different libraries (font-awesome, custom etc.,) which differ
          // in the spacing and dimensions. FIXME: CDAP-15287
          height: 21px;
          font-size: 18px;

          &.icon-stop,
          &.icon-play,
          &.icon-sliders {
            font-size: 14px;
          }

        }

        &:active {
          box-shadow: none;
        }
      }
    }

    .pipeline-scheduler-container {
      .pipeline-scheduler-btn {
        .icon-runtimestarttime {
          font-size: 21px;

          &.unschedule-icon {
            color: $brand-primary;
          }
        }
      }

      &:after {
        @include border-element(-16px);
      }
    }

    .pipeline-configure-container {
      .pipeline-configure-btn {
        .icon-sliders {
          transform: rotate(90deg);
        }
      }

      &:after {
        @include border-element();
      }
    }

    .pipeline-summary-container {
      .pipeline-summary {
        /* 50px header + 55px detail view top panel */
        top: 105px;
      }

      &:after {
        @include border-element(82px);
      }
    }

    .pipeline-history-container {
      .pipeline-history {
        /* 50px header + 55px detail view top panel */
        top: 100px;
      }

      &:after {
        @include border-element(75px);
      }
    }

    .pipeline-stop-container {
      margin: 0 8px 0 10px;

      .icon-stop {
        color: $grey-03;
      }
    }

    .pipeline-run-container,
    .pipeline-stop-container {
      height: 43px;
      border: 1px solid $grey-06;
      border-radius: 5px;
      display: inline-flex;
      &:hover {
        background-color: inherit;
        border-top: 1px solid $grey-05;
      }
    }

    .pipeline-run-container {
      margin-right: 10px;

      > .btn.btn-secondary {
        border: 0;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        .btn-container {
          display: flex;
          align-items: center;
        }
      }
    }

    .pipeline-details-container {
      a:hover {
        text-decoration: none;
      }

      .pipeline-details-btn {
        .btn-container {
          color: $grey-01;
        }
      }

      &:after {
        @include border-element();
      }
    }

    .pipeline-actions-container {
      border-bottom: 1px solid $btn-border-color;

      &.active {
        border-bottom-color: $grey-05;
      }

      .pipeline-actions-popper {
        height: 100%;

        > div:first-child {
          height: 100%;
        }
      }
    }
  }

  .plus-button {
    position: absolute;
    right: 20px;
    margin-top: 20px;
    z-index: 998;

    .popper {
      display: none;
    }
  }
}
